<template>
    <div class="group" >
        <div>
            <template v-for="item in propValue">
                <component
                    :is="item.component"
                    :id="'component' + item.id"
                    :key="item.id"
                    class="component"
                    :style="item.groupStyle"
                    :prop-value="item.propValue"
                    :element="item"
                />
            </template>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        propValue: {
            type: Array,
            default: () => [],
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
   created(){
    var num=1
    for(var item of this.propValue){
        item.id=Number(new Date().getTime())+(Math.random()*100).toFixed(0)+num+''
        num++
    }
   },
    methods:{
       
    }
}
</script>

<style lang="scss" scoped>
.v-button {
  --themeBtn: rgb(7, 108, 224);
  --themeBtn-gradient-color:rgba(7, 108, 224,0.5);
  --themeBtn-hover-color:rgb(7, 108, 224);
  --themeBtn-borderhover-color:rgba(0,0,0,0);
}
.group {
    & > div {
        position: relative;
        width: 100%;
        height: 100%;

        .component {
            position: absolute;
        }
    }
}
</style>
